<template>
  <!-- 永续合约，交割合约公共头部 -->
  <div>
    <div class="contract-header font-28">
      <div class="pl-30 pr-30">
        <div class="flex justify-between pt-45">
          <div class="flex items-center">
            <!-- 没有切换模式的 -->

            <img v-if="isReturn" src="@/assets/image/icon_back_1.png" @click="backPath()" class="w-40 h-40 back mr-50"
              alt="">
            <template v-if="!isChange">
              <img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35"
                @click="onSidebar" />
            </template>
            <!-- 在切换模式下 -->
            <template v-if="isChange">
              <template v-if="isNight">
                <img src="../../../assets/image/icon_back_1.png" class="w-40 h-40 back mr-50" alt="" @click="backPath()">
                <img src="./white-convert.png" alt="convert-img" class="w-35 h-35" @click="onSidebar" />
              </template>
              <template v-else>
                <img src="../../../assets/image/icon_back.png" class="w-40 h-40 back mr-50" alt="" @click="backPath()">
                <img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35"
                  @click="onSidebar" />
              </template>
            </template>
            <div class="flex flex-col pl-21" @click="onSidebar">
              <template v-if="!isChange">
                <div class="font-35 textColor">{{ symbolName.toUpperCase() || '--' }}</div>
              </template>
              <template v-if="isChange">
                <div class="font-35" :class="isNight ? 'text-white' : 'text-black'">{{ symbol &&
                  symbol.toUpperCase() || '--' }}</div>
              </template>
            </div>
            <div v-if="range" class="pl-30" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{
              range > 0 ? '+' : '' }}{{ range || '--' }}%</div>
          </div>
          <div class="flex items-center" v-if="islevel">
            <img src="../../../assets/image/icon-star_active.png" class="w-30 h-30 mr-10 ml-20" @click="openCurrency"
              v-if="isCollect" />
            <img v-else src="../../../assets/image/icon-star.png" class="w-30 h-30 mr-10 ml-20" @click="openCurrency" />
          </div>
          <img v-if="isTrade" src="../../../assets/image/kline.png" class="w-44 h-44 right" alt=""
            @click="$router.push(`/cryptos/trendDetails/${symbol}?kineType=trade`)">
        </div>
      </div>
      <!-- 左侧边弹出菜单 -->
      <van-popup class="popup" round v-model:show="show" close-icon-position="top-left" position="left" @closed="onClose">
        <div class="pl-42 pr-40 font-28">
          <div class="flex justify-between mb-42 mt-53">
            <div class="flex items-center text-grey">
              <div class="mr-12 font-28">{{ $t('名称') }}</div>
            </div>
            <div class="flex text-grey">
              <div class="flex items-center">
                <div class="font-28">{{ $t('最新价格') }}</div>
              </div>
              <div class="flex items-center">
                <div class="mr-12 font-28">/24H{{ $t('涨跌') }}</div>
              </div>
            </div>
          </div>
          <div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
            <div>
              <div class="font-700 textColor font-28">{{ item.name || '--' }}</div>
              <div v-if="!kineType" class="text-grey mt-10 font-28">{{ title }}</div>
            </div>
            <div class="text-right">
              <div class="textColor font-28">{{ item.close || '--' }}</div>
              <div class="mt-10 font-28" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">
                {{ item.change_ratio }}%</div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>

    <add-currency ref="addCurrencyRef" @updateItem="getIsItemHasAddGlobal" :isCollect="isCollect"></add-currency>
  </div>
</template>
    
<script>
import { setStorage, handleImage } from '@/utils/utis.js'
import { Popup, showSuccessToast } from "vant";
import { mapGetters } from "vuex";
import { _getHomeList, _collect, _deleteCollect, _checkIsInCollect } from "@/service/home.api";
import { THEME } from '@/config/theme'
import { useRouter } from "vue-router";
import addCurrency from '@/components/add-currency/index.vue'
import { _isItemHasAdd, _isItemHasAddGlobal } from '@/service/quotes.api'
const router = useRouter()
export default {
  name: "contractHeader",
  props: {
    tabIndex: {
      type: String,
      default: null
    },
    backFunc: {
      type: Function,
      default: null
    },
    symbol: {
      type: String,
      default: ''
    },
    range: {
      type: String,
      defalult: ''
    },
    islevel: {
      type: Boolean,
      defalult: false
    },
    title: {
      type: String,
      defalult: '--'
    },
    isNight: {
      type: Boolean,
      defalult: false
    },
    isChange: {
      type: Boolean,
      defalult: false
    },
    isTrade: {
      type: Boolean,
      defalult: false
    },
    kineType: {
      type: String,
      defalult: ''
    },
    isReturn: {
      type: Boolean,
      defalult: false
    },
    symbolName: {
      type: String,
      defalult: ''
    },
  },
  components: {
    [Popup.name]: Popup,
    addCurrency
  },
  computed: {
    ...mapGetters({ coinList: 'home/coinList' }),
  },
  data() {
    const arr = []
    for (let i = 0; i < 10; i++) {
      arr.push({ id: i })
    }
    return {
      THEME,
      //   selectIndex2:this.selectIndex,
      show: false,
      timeout: null,
      collected: '0',
      // title: '',
      list: arr, //[
      // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
      // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
      // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
      //]
      isCollect: false
    }
  },
  watch: {
    symbol(val) {
      this.getIsItemHasAddGlobal()
      if (this.islevel) {
        this.$emit('changeLine', true)
      }
      if (this.islevel && this.$store.state.user.userInfo.token) {
        let symbol = this.$route.params.symbol;
        _checkIsInCollect(symbol).then(data => {
          const { status } = data
          this.collected = status
        })
      }
    }
  },
  created() {
    // this.coins = this.coinList.map(item => item.symbol)
    // console.log('this.coins', this.coins)
    if (this.islevel && this.$store.state.user.userInfo.token) {
      let symbol = this.$route.params.symbol;
      // _checkIsInCollect(symbol).then(data => {
      //   const { status } = data
      //   this.collected = status
      // })
    }
  },
  methods: {
    handleImage,
    onRoute(item) {
      if (this.islevel) {
        if (this.$route.params.symbol !== item.symbol) {
          this.$router.push(`/cryptos/trendDetails/${item.symbol}?type=${this.$route.query.type}`)
          // alert(this.kineType)
          if (this.kineType) {
            setStorage('tradeSymbol', item.symbol)
          } else {
            setStorage('symbol', item.symbol)
          }
          this.$emit('update-coin', item.symbol)
          this.$forceUpdate()
        }

      } else {
        if (this.$route.params.symbol !== item.symbol) {
          this.$router.push(`/cryptos/trade/${item.symbol}`)
          setStorage('tradeSymbol', item.symbol)
          this.$emit('update-coin', item.symbol)
          this.$forceUpdate()
        }
      }
      this.show = false
    },
    onSidebar() { // 侧边栏打开
      // console.log(this.userInfo)
      this.coins = this.coinList.map(item => item.symbol)
      this.show = true
      this.fetchList()
    },
    fetchList() { // 获取行情
      _getHomeList(this.coins.join(',')).then(list => {
        // console.log(list)
        this.list = list
        if (this.timeout) {
          clearTimeout(this.timeout)
          this.timeout = null
        }
        this.timeout = setTimeout(() => {
          this.fetchList()
        }, 1000)
      })
    },
    onClose() {
      if (this.timeout) {
        clearTimeout(this.timeout)
        this.timeout = null
      }
    },
    jump() {
      this.$router.push(`/trendDetails/${this.symbol}`)
    },
    changeTab(index) {
      this.$emit('tab', index)
      // this.selectIndex2 = index;
    },
    goBack() {
      if (this.backFunc) {
        this.backFunc()
      } else {
        this.$router.go(-1);
      }
    },
    goRouter(params) {
      this.$router.push(params);
    },
    onCollect() { // 收藏，取消收藏
      let _api = _collect
      if (this.collected === '1') {
        _api = _deleteCollect
      }
      _api(this.symbol).then((res) => {
        if (this.$store.state.user.userInfo.token) {
          this.collected = this.collected === '1' ? '0' : '1'
          if (this.collected === '1') {
            showSuccessToast(this.$t('收藏成功'))
          } else {
            showSuccessToast(this.$t('取消收藏'))
          }
        }
      })
    },
    // goHistory() {
    //   const url = ((this.tabIndex * 1) == 1) ? 'perpetualHistory' : 'deliveryContractHistory'
    //   this.$router.push({
    //     path: `/${url}?symbol=${this.symbol}`
    //   });
    // },
    changeBg() {
      this.$emit('changeNight', !this.isNight)
    },
    backPath() {
      if (this.$route.query?.from === 'trade') {
        this.$router.push('/trade/index?tabActive=1')
      } else if (this.$route.query.isOptional == 1) {
        this.$router.push('/optional/index')
      }
      // else if (this.$route.query.isOptional == 2){
      //   this.$router.push('/optional/search')
      // }
      else {
        this.$router.push('/quotes/index?tabActive=1')
      }
    },
    //打开自选弹窗
    openCurrency() {
      this.$refs.addCurrencyRef.openCurrency(this.symbol)
    },
    //判断是否加入收藏
    getIsItemHasAddGlobal() {
      let obj = {
        symbol: this.symbol
      }
      _isItemHasAddGlobal(obj).then((data) => {
        this.isCollect = data
      })
    }
  },
}

</script>
    
<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
  // .contract-header{
  //     background-color:#F5F5F5;
  // }

  .wallet-background {
    background-color: #E8E8E8;
  }

  .select-active {
    background-color: white;
    color: black;
  }

  .no-select {
    background-color: #e8e8e8;
    color: $text_color1;
    ;
  }

  // 弹出层样式

  .night {
    color: $text_color;
  }

  .h-40 {
    height: 40px !important;
  }
}

:deep(.contract-header .van-popup) {
  width: 670px;
  height: 100%;
}
</style>
    